<template>
  <view>
    <view class="detail-container" v-if="item">
      <image :src="item.licenseImgs && item.licenseImgs[0] ? item.licenseImgs[0].url || item.licenseImgs[0] : ''" class="detail-img" mode="aspectFill" />
      <view class="detail-title">{{ item.title }}</view>
      <view class="detail-desc">{{ item.prospect }}</view>
      <view class="detail-section"><text class="label">企业名称：</text>{{ item.company }}</view>
      <view class="detail-section"><text class="label">注册资本：</text>{{ item.capital }}</view>
      <view class="detail-section"><text class="label">法人代表：</text>{{ item.legalPerson }}</view>
      <view class="detail-section"><text class="label">具体方案：</text>{{ item.plan }}</view>
      <view class="detail-section"><text class="label">执照图片：</text>
        <view class="img-list">
          <image v-for="(img,idx) in item.licenseImgs" :key="idx" :src="img.url || img" class="mini-img" mode="aspectFill" @click="previewImgs(item.licenseImgs, idx)" />
        </view>
      </view>
      <view class="detail-section"><text class="label">法人身份证：</text>
        <view class="img-list">
          <image v-for="(img,idx) in item.idcardImgs" :key="idx" :src="img.url || img" class="mini-img" mode="aspectFill" @click="previewImgs(item.idcardImgs, idx)" />
        </view>
      </view>
    </view>
    <view v-else style="text-align:center;color:#aaa;margin-top:60rpx;">未找到项目信息</view>
    <!-- 编辑/删除按钮，仅创建者可见 -->
    <view v-if="canEdit" class="fab-group">
      <button class="fab-btn edit" @click="goEdit">编辑</button>
      <button class="fab-btn delete" @click="deleteItem">删除</button>
    </view>
  </view>
</template>

<script>
import cfg from '@/common/config.js'
import api from '@/common/api/index.js'
export default {
  data() {
    return {
      item: null,
      canEdit: false
    }
  },
  onLoad(query) {
    if (query.id) {
      api.req(`/station/idle-publish/get?id=${query.id}`, {}, 'GET', 'JSON', false).then(res => {
        if (res.code === 0 && res.data) {
          let item = { ...res.data };
          item.licenseImgs = typeof item.licenseImgs === 'string' ? (item.licenseImgs ? item.licenseImgs.split(',') : []) : (item.licenseImgs || []);
          item.idcardImgs = typeof item.idcardImgs === 'string' ? (item.idcardImgs ? item.idcardImgs.split(',') : []) : (item.idcardImgs || []);
          this.item = item;
          // 判断是否可编辑
          let userId = uni.getStorageSync('user_data')?.userId || '0';
          this.canEdit = userId && item.creater && String(userId) === String(item.creater);
        }
      });
    }
  },
  methods: {
    goEdit() {
      if (this.item && this.item.id) {
        uni.navigateTo({ url: `/subPackage3/publish?id=${this.item.id}` });
      }
    },
    deleteItem() {
      if (!this.item || !this.item.id) return;
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该项目吗？',
        success: (res) => {
          if (res.confirm) {
            api.req(`/station/idle-publish/delete?id=${this.item.id}`, {}, 'POST', 'JSON', false).then(resp => {
              if (resp.code === 0) {
                uni.showToast({ title: '删除成功', icon: 'success' });
                setTimeout(() => {
                  uni.navigateBack();
                }, 800);
              } else {
                uni.showToast({ title: resp.msg || '删除失败', icon: 'none' });
              }
            });
          }
        }
      });
    },
    previewImgs(imgs, idx) {
      // 兼容url和字符串数组
      const urls = imgs.map(img => img.url || img);
      uni.previewImage({
        urls,
        current: urls[idx]
      });
    }
  }
}
</script>

<style scoped>
.detail-container {
  background: #fff;
  min-height: 100vh;
  padding: 0 0 40rpx 0;
}
.detail-img {
  width: 100vw;
  height: 320rpx;
  object-fit: cover;
  display: block;
}
.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  margin: 30rpx 20rpx 10rpx 20rpx;
  color: #222;
}
.detail-desc {
  font-size: 28rpx;
  color: #666;
  margin: 0 20rpx 20rpx 20rpx;
  line-height: 1.7;
}
.detail-section {
  font-size: 26rpx;
  color: #444;
  margin: 18rpx 20rpx 0 20rpx;
  line-height: 1.6;
}
.label {
  color: #5677fc;
  font-weight: bold;
}
.img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 8rpx;
}
.mini-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
  background: #f7f7f7;
}
.fab-group {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  z-index: 99;
}
.fab-btn {
  width: 120rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(86,119,252,0.12);
}
.fab-btn.edit {
  background: linear-gradient(90deg, #5677fc 0%, #6ddaa3 100%);
}
.fab-btn.delete {
  background: linear-gradient(90deg, #f74d54 0%, #faad14 100%);
}
</style>
